import {storeBindingsBehavior} from "mobx-miniprogram-bindings";
import member from "@src/store/member";

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: member,
    fields: ['isMember'],
    actions: ['getBaseInfo'],
  }],
  data: {
    bgImgUrl: "/wxapp/static/index/i-ka.png",
    canvasTemplate: null,
  },
  properties: {
    cardImg: String,
  },
  observers: {
    'cardImg': function (cardImg) {
      if (cardImg) {
        this.setData({bgImgUrl: cardImg});
        this.genPosterData();
      }
    }
  },
  lifetimes: {
    ready() {
      // if (this.data.bgImgUrl) {
      //   this.genPosterData()
      // }
    }
  },
  methods: {
    posterImgOk(e) {
      this.triggerEvent('poster', e.detail.path);
      this.setData({canvasTemplate: null})
    },
    genPosterData() {
      let defaultWidth = 750;
      let defaultHeight = 600;

      let bgImgUrl = getApp().toFullUrl(this.data.bgImgUrl);
      this.setData({canvasTemplate: null})
      let canvasTemplate = {
        background: "#E8F6FD",
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [
          {
            //卡片
            type: "image",
            url: bgImgUrl,
            css: {
              top: "130rpx",
              left: (defaultWidth - 505) / 2 + "rpx",
              width: "505rpx",
              height: "313rpx",
              mode: "aspectFill",
              borderRadius: "17rpx"
            }
          }, {
            //白色遮盖背景
            type: "image",
            url: getApp().toFullUrl("/wxapp/static/posterAndShare/member-bg.png"),
            css: {
              top: "344rpx",
              left: "0rpx",
              width: "750rpx",
              height: "256rpx"
            }
          }
        ]
      };
      wx.nextTick(() => {
        this.setData({canvasTemplate: canvasTemplate})
      })
    },
  }
});
